<template>
  <el-container>
    <el-header height="48px">
      <i class="el-icon-user-solid"></i>
      所有医护人员信息展示
    </el-header>
    <el-main>
      <!-- <el-row style="text-align: left">
        <el-input v-model="search" 
        size="mini" 
        placeholder="请输入内容" 
        style="width: 200px" 
        clearable></el-input>
        <el-button type="primary" 
          size="mini" 
          @click="tableFilter"
          icon="el-icon-search">搜索</el-button>
      </el-row> -->
      <el-table
        :data="tableData"
        style="width: 100%">
        <el-table-column
          label="姓名"
          prop="name">
        </el-table-column>
        <el-table-column
          label="性别"
          :formatter="genderFormatter">
        </el-table-column>
        <el-table-column
          label="电话"
          prop="phone">
        </el-table-column>
        <el-table-column
          label="科室"
          prop="department.name">
        </el-table-column>
        <el-table-column
          label="是否是科室主任"
          :formatter="truthFormatter">
        </el-table-column>
        <el-table-column
          align="right">
          <template slot="header">
            <el-button type="success" size="medium" 
              icon="el-icon-plus" circle
              @click="handleAddNew"
              ></el-button>
          </template>
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="handleDetail(scope.$index, scope.row)">详情</el-button>
            <el-button
              size="mini"
              type="primary"
              @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[pageInfo.pageSize]"
        :page-size="pageInfo.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageInfo.total">
      </el-pagination>
    </el-main>

    <!-- 详情提示框 -->
    <el-dialog
      title="医护人员详情"
      :visible.sync="detailDialogVisible"
      width="30%">
        <el-table :data="detailData">
          <el-table-column property="detailName" label="详情名"></el-table-column>
          <el-table-column property="detailValue" label="详情值"></el-table-column>
        </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="detailDialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 修改对话框 -->
    <el-dialog title="修改信息" :visible.sync="updateDialogVisible" width="600px">
      <el-form :model="updateForm" label-position="right">
        <el-form-item label="姓名" :label-width="formLabelWidth">
          <el-input v-model="updateForm.name" autocomplete="off" style="width: 380px"></el-input>
        </el-form-item>
        <el-form-item label="账号" :label-width="formLabelWidth">
          <el-input v-model="updateForm.username" autocomplete="off" style="width: 380px"></el-input>
        </el-form-item>
        <el-form-item label="密码" :label-width="formLabelWidth">
          <el-input v-model="updateForm.password" autocomplete="off" style="width: 380px" show-password></el-input>
        </el-form-item>
        <el-form-item label="性别" :label-width="formLabelWidth">
          <el-radio-group v-model="updateForm.gender" autocomplete="off" style="width: 380px">
            <el-radio label="男" style="margin-left:-200px">男</el-radio>
            <el-radio label="女" style="margin-left:50px">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="生日" :label-width="formLabelWidth">
          <el-date-picker
            v-model="updateForm.birth"
            type="date"
            placeholder="选择日期"
            style="margin-left:-158px">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="电话" :label-width="formLabelWidth">
          <el-input v-model="updateForm.phone" autocomplete="off" style="width: 380px"></el-input>
        </el-form-item>
        <el-form-item label="科室" :label-width="formLabelWidth">
          <el-select v-model="updateForm.deptName" placeholder="请选择科室" style="margin-left:-158px">
            <el-option v-for="dept in deptList" :label="dept.name" :value="dept.name" :key="dept.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="科室主任" :label-width="formLabelWidth">
          <el-switch
            v-model="updateForm.director"
            active-color="#13ce66"
            inactive-color="#d3d3d3"
            style="margin-left:-320px">
          </el-switch>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="updateDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="doUpdate">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 删除提示 -->
    <el-dialog
      title="删除提示"
      :visible.sync="deleteDialogVisible"
      width="28%">
      <span>您正在执行删除医护人员信息操作<br/><br/>此操作不可逆，确定要删除吗？</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="deleteDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="doDelete">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 新增对话框 -->
    <el-dialog title="新增人员" :visible.sync="addNewDialogVisible" width="600px">
      <el-form :model="addNewForm" label-position="right">
        <el-form-item label="姓名" :label-width="formLabelWidth">
          <el-input v-model="addNewForm.name" autocomplete="off" style="width: 380px"></el-input>
        </el-form-item>
        <el-form-item label="账号" :label-width="formLabelWidth">
          <el-input v-model="addNewForm.username" autocomplete="off" style="width: 380px"></el-input>
        </el-form-item>
        <el-form-item label="密码" :label-width="formLabelWidth">
          <el-input v-model="addNewForm.password" autocomplete="off" style="width: 380px" show-password></el-input>
        </el-form-item>
        <el-form-item label="性别" :label-width="formLabelWidth">
          <el-radio-group v-model="addNewForm.gender" autocomplete="off" style="width: 380px">
            <el-radio label="男" style="margin-left:-200px">男</el-radio>
            <el-radio label="女" style="margin-left:50px">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="生日" :label-width="formLabelWidth">
          <el-date-picker
            v-model="addNewForm.birth"
            type="date"
            placeholder="选择日期"
            style="margin-left:-158px">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="电话" :label-width="formLabelWidth">
          <el-input v-model="addNewForm.phone" autocomplete="off" style="width: 380px"></el-input>
        </el-form-item>
        <el-form-item label="科室" :label-width="formLabelWidth">
          <el-select v-model="addNewForm.deptName" placeholder="请选择科室" style="margin-left:-158px">
            <el-option v-for="dept in deptList" :label="dept.name" :value="dept.name" :key="dept.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="入职日期" :label-width="formLabelWidth">
          <el-date-picker
            v-model="addNewForm.hiredate"
            type="date"
            placeholder="选择日期"
            style="margin-left:-158px">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="科室主任" :label-width="formLabelWidth">
          <el-checkbox v-model="addNewForm.isDirector" style="margin-left:-330px"></el-checkbox>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addNewDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="doAddNew">确 定</el-button>
      </div>
    </el-dialog>
  </el-container>
</template>

<script>
  import moment from "moment";
  export default {
    data() {
      return {
        pageInfo: [],
        tableData: [],
        search: '',
        pageSize: 6,
        currentPage: 1,
        detailData: [],
        updateForm: {},
        departmentName: "",
        addNewForm: {
          name: "",
          username: "",
          password: "",
          gender: "",
          birth: "",
          phone: "",
          deptName: "",
          hiredate: "",
          isDirector: false
        },
        emptyForm: {
          name: "",
          username: "",
          password: "",
          gender: "",
          birth: "",
          phone: "",
          deptName: "",
          hiredate: "",
          isDirector: false
        },
        detailDialogVisible: false,
        updateDialogVisible: false,
        deleteDialogVisible: false,
        addNewDialogVisible: false,
        needDeleteId: -1,
        formLabelWidth: '100px',
        deptList: [],
      }
    },
    methods: {
      getGenderWord(genderData) {
        if (genderData == "男" || genderData == "man" || genderData == "male" || genderData == "nan")
          return "男";
        else
          return "女";
      },
      handleDetail(index, row) {
        this.detailData = [];
        let detailKeys = Object.keys(row);
        for (let i of detailKeys) {
          if (i == "id") {
            this.detailData.push({"detailName": "id", "detailValue": row[i]});
          } else if (i == "name") {
            this.detailData.push({"detailName": "姓名", "detailValue": row[i]});
          } else if (i == "username") {
            this.detailData.push({"detailName": "账号", "detailValue": row[i]});
          } else if (i == "gender") {
            this.detailData.push({"detailName": "性别", "detailValue": this.getGenderWord(row[i])});
          } else if (i == "birth") {
            this.detailData.push({"detailName": "生日", "detailValue": row[i]});
          } else if (i == "phone") {
            this.detailData.push({"detailName": "电话", "detailValue": row[i]});
          } else if (i == "hiredate") {
            this.detailData.push({"detailName": "入职日期", "detailValue": row[i]});
          } else if (i == "director") {
            this.detailData.push({"detailName": "是否是科室主任", "detailValue": row[i]?"是":"否"});
          } else if (i == "department") {
            this.detailData.push({"detailName": "科室", "detailValue": row[i].name});
          }
        }
        this.detailDialogVisible = true;
      },
      handleEdit(index, row) {
        this.updateForm = {...row};
        this.$set(this.updateForm, "deptName", row.department.name);
        this.updateDialogVisible = true;
      },
      handleDelete(index, row) {
        this.needDeleteId = row.id;
        this.deleteDialogVisible = true
      },
      handleAddNew() {
        this.addNewForm = {...this.emptyForm};
        this.addNewDialogVisible = true;
      },
      getDoctorPageInfo(currentPage, pageSize) {
        this.$axios.get(`http://localhost:8080/admin/doctor/andDept/${currentPage}/${pageSize}`).then(result=>{
          if (result.data.code == 200) {
            this.pageInfo = result.data.data;
            this.tableData = [...this.pageInfo.list];
          } else {
            this.$message.error("分页查询医护人员信息失败");
          }
        });
      },
      getDeptList() {
        this.$axios.get(`http://localhost:8080/admin/dept`).then(result=>{
          if (result.data.code == 200) {
            this.deptList = result.data.data;
          }
        });
      },
      genderFormatter(row) {
        return this.getGenderWord(row.gender)
      },
      truthFormatter(row) {
        if (row.director)
          return "√";
        else
          return "x";
      },
      handleCurrentChange(val) {
        this.getDoctorPageInfo(val, this.pageSize);
        this.currentPage = val;
      },
      doDelete() {
        this.$axios.delete(`http://localhost:8080/admin/doctor/${this.needDeleteId}`).then(result=>{
          if (result.data.code == 200) {
            this.getDoctorPageInfo(this.currentPage, this.pageSize);
            this.deleteDialogVisible = false;
            this.$message({
              showClose: true,
              message: "医护人员信息删除成功"
            });
          } else {
            this.deleteDialogVisible = false;
            this.$message.error("医护人员信息删除失败");
          }
        });
      },
      doUpdate() {
        // 整理修改数据
        const doctor = {};
        doctor.id = this.updateForm.id;
        doctor.name = this.updateForm.name;
        doctor.username = this.updateForm.username;
        doctor.password = this.updateForm.password;
        doctor.gender = this.updateForm.gender;
        doctor.birth = moment(this.updateForm.birth).format('YYYY-MM-DD');
        doctor.phone = this.updateForm.phone;
        for (let dept of this.deptList) {
          if (dept.name == this.updateForm.deptName) {
            doctor.deptId = dept.id;
            break;
          }
        }
        doctor.hiredate = this.updateForm.hiredate;
        doctor.isDirector = this.updateForm.director;

        // 发送修改请求
        this.$axios.put("http://localhost:8080/admin/doctor", doctor).then(result=>{
          if (result.data.code == 200) {
            this.getDoctorPageInfo(this.currentPage, this.pageSize);
            this.updateDialogVisible = false;
            this.$message({
              showClose: true,
              message: "医护人员信息修改成功"
            });
          } else {
            this.updateDialogVisible = false;
            this.$message.error("医护人员信息修改失败");
          }
        });
      },
      doAddNew() {
        // 整理新增数据
        const doctor = {};
        doctor.name = this.addNewForm.name;
        doctor.username = this.addNewForm.username;
        doctor.password = this.addNewForm.password;
        doctor.gender = this.addNewForm.gender;
        doctor.birth = moment(this.addNewForm.birth).format('YYYY-MM-DD');
        doctor.phone = this.addNewForm.phone;
        for (let dept of this.deptList) {
          if (dept.name == this.addNewForm.deptName) {
            doctor.deptId = dept.id;
            break;
          }
        }
        doctor.hiredate = moment(this.addNewForm.hiredate).format('YYYY-MM-DD');
        doctor.isDirector = this.addNewForm.isDirector;

        // 发送新增请求
        this.$axios.post("http://localhost:8080/admin/doctor", doctor).then(result=>{
          if (result.data.code == 200) {
            this.handleCurrentChange(1)
            this.addNewDialogVisible = false;
            this.$message({
              showClose: true,
              message: "新增医护人员信息成功"
            });
          } else {
            this.addNewDialogVisible = false;
            this.$message.error("新增医护人员信息失败");
          }
        });
      },
      // tableFilter() {
      //   this.tableData=[];
      //   console.log(!this.search);
      //   console.log([...this.pageInfo.list]);
      //   if (!this.search) {
      //     this.tableData = [...this.pageInfo.list];
      //   }
      //   for (let i in this.pageInfo.list) {
      //     let datai = this.pageInfo.list[i];
      //     if (datai.name.toLowerCase().includes(this.search.toLowerCase())) {
      //       this.tableData.shift(datai);
      //     }
      //   }
      // }
    },
    mounted() {
      this.getDoctorPageInfo(1, this.pageSize);
      this.getDeptList();
    },
  }
</script>

<style scoped>
  .el-header {
    background-color: transparent;
    color: #333;
    text-align: left;
    line-height: 48px;
  }
  
  .el-main {
    background-color: #fff;
    color: #333;
    text-align: center;
    border-radius: 8px;
  }
  .el-main .el-pagination{
    margin-top: 20px;
  }
</style>